<template>
	<div class="sc-select-filter">
		<div v-if="data.length<=0" class="sc-select-filter__no-data">
			暂无数据
		</div>
		<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
			<div class="sc-select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{item.title}}：</label>
			</div>
			<div class="sc-select-filter__item-options">
				<ul>
					<li :class="{'active':isOptionActive(option, item)}" v-for="option in item.options"
						:key="option.value" @click="select(option, item)">
						<el-icon v-if="option.icon">
							<component :is="option.icon" />
						</el-icon>
						<span>{{option.label}}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => []
			},
			selectedValues: {
				type: Object,
				default: () => ({})
			},
			labelWidth: {
				type: Number,
				default: 120
			}
		},
		data() {
			return {
				selected: {}
			};
		},
		watch: {
			data: {
				immediate: true,
				handler(val) {
					val.forEach(item => {
						let defaultOptions = item.options.filter(opt => opt.$default);
						if (!defaultOptions.length && item.options.length) {
							defaultOptions = [item.options[0]];
						}
						const initialValues = this.selectedValues[item.key] || defaultOptions.map(opt => ({
							value: opt.value,
							operator: opt.operator
						}));
						// 修改这里：移除 this.$set
						this.selected = {
							...this.selected,
							[item.key]: initialValues
						};
					});
				}
			}
		},
		mounted() {
			this.data.forEach(item => {
				let defaultOptions = item.options.filter(opt => opt.$default);
				if (!defaultOptions.length && item.options.length) {
					defaultOptions = [item.options[0]];
				}
				const initialValues = this.selectedValues[item.key] || defaultOptions.map(opt => ({
					value: opt.value,
					operator: opt.operator
				}));
				// 修改这里：移除 this.$set
				this.selected = {
					...this.selected,
					[item.key]: initialValues
				};
			});
		},
		methods: {
			isOptionActive(option, item) {
				return this.selected[item.key]?.some(s =>
					s.value === option.value && s.operator === option.operator
				) ?? false;
			},
			select(option, item) {
				const current = {
					value: option.value,
					operator: option.operator
				};
				const isSelected = this.isOptionActive(option, item);

				if (isSelected) {
					return;
				}

				if (item.multiple) {
					if (option === item.options[0]) { // 判断是否为第一个选项
						this.selected[item.key] = [current];
					} else {
						let selected = [...this.selected[item.key]];
						if (isSelected) {
							selected = selected.filter(s => !(s.value === current.value && s.operator === current
								.operator));
							if (!selected.length) {
								selected = [{
									value: item.options[0].value,
									operator: item.options[0].operator
								}];
							}
						} else {
							selected.push(current);
							// 移除第一个选项如果存在
							const firstOption = item.options[0];
							selected = selected.filter(s => !(s.value === firstOption.value && s.operator === firstOption
								.operator));
						}
						this.selected[item.key] = selected;
					}
				} else {
					this.selected[item.key] = isSelected ? [] : [current];
				}
				this.change();
			},
			change() {
				this.$emit('onChange', this.selected);
			}
		}
	};
</script>

<style scoped>
	.sc-select-filter {
		width: 100%;
	}

	.sc-select-filter__item {
		display: flex;
	}

	.sc-select-filter__item-title {
		width: 80px;
	}

	.sc-select-filter__item-title label {
		font-size: 14px;
		padding-top: 13px;
		display: inline-block;
		color: #999;
	}

	.sc-select-filter__item-options {
		flex: 1;
		border-bottom: 1px dashed var(--el-border-color-light);
	}

	.sc-select-filter__item-options ul {
		display: flex;
		flex-wrap: wrap;
		padding-top: 10px;
	}

	.sc-select-filter__item-options li {
		list-style: none;
		cursor: pointer;
		height: 28px;
		padding: 0 15px;
		border-radius: 32px;
		margin: 0 10px 10px 0;
		display: flex;
		align-items: center;
		background: var(--el-color-primary-light-9);
	}

	.sc-select-filter__item-options li .el-icon {
		margin-right: 3px;
		font-size: 16px;
	}

	.sc-select-filter__item-options li:hover {
		color: var(--el-color-primary);
	}

	.sc-select-filter__item-options li.active {
		background: var(--el-color-primary);
		color: #fff;
		font-weight: bold;
	}

	.sc-select-filter__item:last-of-type .sc-select-filter__item-options {
		border: 0;
	}

	.sc-select-filter__no-data {
		color: #999;
	}
</style>
